<template>
  <div class="container_main" v-bind:style="{width:mainWidth+'px',height:mainHeight+'px'}">
    <div class="container_header"
         v-bind:style="{width:mainWidth+'px',height:bannerHeight+'px'}">
      <h3 class="admin_logo">小伴后台管理</h3>
      <div class="myinfo">
        <el-button>管理员</el-button>
        <el-button @click="logoutClk()">退出</el-button>
      </div>
    </div>
    <div class="container_body" v-bind:style="{width:mainWidth+'px',height:bodyHeight+'px'}">
      <div class="container_menu"
           v-bind:style="{width:'200px',height:bodyHeight+'px',float:'left',backgroundColor:'rgb(84, 92, 100)'}">
        <el-menu
          default-active="/admin/user/regUserList"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
          unique-opened
        >
          <el-submenu index="user">
            <template slot="title">
              <i class="fa fa-user fa-lg"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/admin/user/list">用户列表</el-menu-item>
          </el-submenu>
          <el-submenu index="user">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>接送员管理</span>
            </template>
            <el-menu-item index="/admin/user/regUserList">注册接送员</el-menu-item>
            <el-menu-item index="/admin/user/regUserList">认证申请</el-menu-item>
            <el-menu-item index="/admin/user/regUserList">认证接送员</el-menu-item>
            <el-menu-item index="/admin/user/regUserList">已冻结接送员</el-menu-item>
          </el-submenu>
          <el-submenu index="order">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>订单管理</span>
            </template>
            <el-menu-item index="/admin/order/waitCarpoolList">待拼车订单</el-menu-item>
            <el-menu-item index="/admin/order/waitMatchList">待匹配订单</el-menu-item>
            <el-menu-item index="/admin/order/waitPayList">待支付订单</el-menu-item>
            <el-menu-item index="/admin/order/payedList">已支付订单</el-menu-item>
            <el-menu-item index="/admin/order/allList">全部订单</el-menu-item>
          </el-submenu>
          <el-submenu index="roadline">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>运营路线管理</span>
            </template>
            <el-menu-item index="/admin/order/waitCarpoolList">待拼车</el-menu-item>
            <el-menu-item index="/admin/order/waitMatchList">运营中</el-menu-item>
            <el-menu-item index="/admin/order/waitPayList">已结束</el-menu-item>
            <el-menu-item index="/admin/order/waitPayList">支付审批</el-menu-item>
          </el-submenu>
          <el-submenu index="activityMgr">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>活动管理</span>
            </template>
            <el-menu-item index="/admin/sysmgr/adminlist">活动列表</el-menu-item>
            <el-menu-item index="/admin/sysmgr/adminlist">红包设置</el-menu-item>
          </el-submenu>
          <el-submenu index="moneyMgr">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>财务管理</span>
            </template>
            <el-menu-item index="/admin/order/waitCarpoolList">路线收入流水</el-menu-item>
            <el-menu-item index="/admin/order/waitMatchList">接送员支付</el-menu-item>
            <el-menu-item index="/admin/order/waitPayList">用户支付记录</el-menu-item>
          </el-submenu>
          <el-submenu index="sysmgr">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>系统管理</span>
            </template>
            <el-menu-item index="/admin/sysmgr/adminlist">管理员列表</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
      <div class="container_content"
           v-bind:style="{width:contentWidth+'px',height:bodyHeight+'px',float:'left'}">
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <el-breadcrumb separator-class="el-icon-arrow-right" v-bind:style="{marginLeft:'10px'}">
                <el-breadcrumb-item>{{pageName}}</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
          </el-col>
        </el-row>
        <div
          v-bind:style="{width:(contentWidth-4-20)+'px',height:(bodyHeight-40-20)+'px',float:'left',borderWidth:'2px',borderColor:'#99a9bf',borderStyle:'solid',padding:'10px',overflow:'scroll'}">
          <keep-alive>
            <router-view/>
          </keep-alive>
        </div>
      </div>
    </div>
    <div class="container_footer"
         v-bind:style="{width:mainWidth+'px',height:bannerHeight+'px'}">
      footer
    </div>
  </div>
</template>
<style scoped>
  .grid-content {
    border-radius: 5px 5px 0 0;
    height: 25px;
    padding-top: 11px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .admin_logo {
    width: 200px;
    height: 50px;
    float: left;
    padding: 0;
    margin: 0;
    line-height: 50px;
  }

  .myinfo {
    width: 200px;
    height: 50px;
    line-height: 50px;
    float: right;
    margin-right: 50px;
  }
</style>
<script>
  import ElButton from "../../../node_modules/element-ui/packages/button/src/button.vue";
  import ElSubmenu from "../../../node_modules/element-ui/packages/menu/src/submenu.vue";

  export default {
    components: {
      ElSubmenu,
      ElButton
    },
    data: function () {
      let bannerHeight = 50;
      return {
        pageName: window.currentRouter ? window.currentRouter.name : "",
        bannerHeight: bannerHeight,
        mainWidth: window.innerWidth,
        mainHeight: window.innerHeight,
        bodyHeight: window.innerHeight - bannerHeight * 2,
        contentWidth: window.innerWidth - 200
      };
    },
    methods: {
      logoutClk () {
        window.location.href = "/login";
      }
    },
    mounted: function () {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.screenWidth = window.innerWidth;
          window.screenHeight = window.innerHeight;
          if (window.screenWidth > 700) {
            that.mainWidth = window.screenWidth;
            that.contentWidth = window.innerWidth - 200;
          }
          if (window.screenHeight > 700) {
            that.mainHeight = window.screenHeight;
            that.bodyHeight = window.innerHeight - that.bannerHeight * 2;
          }
        })();
      };
    },
    watch: {
      mainWidth (val) {
        this.mainWidth = val;
      },
      mainHeight (val) {
        this.mainHeight = val;
      },
      bodyHeight (val) {
        this.bodyHeight = val;
      },
      contentWidth (val) {
        this.contentWidth = val;
      }
    }

  };
</script>
